<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>必要商城_大牌品质 工厂价格</title>
    <link
      href="http://static.biyao.com/pc/favicon.ico"
      rel="shortcut icon"
      type="image/x-icon"
    />
    <link href="./lib/common.css" rel="stylesheet" type="text/css" />
    <link href="./lib/new.main.css" rel="stylesheet" type="text/css" />
    <link href="./lib/elementUI.css" rel="stylesheet" type="text/css" />
    <link href="./lib/global.css" rel="stylesheet" type="text/css" />
    <link href="./lib/iprHeader.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" type="text/css" href="./lib/new.category.css" />
  </head>

  <body id="pagebody">
    <div class="header header-index"></div>
    <!-- 导航栏 -->
    <div class="nav nav-index">
      <div class="clearfix">
        <a href="http://www.biyao.com/home/index.html" class="nav-logo"
          ><img src="./lib/logo.png" height="51"
        /></a>
        <div class="nav-category">
          <p><span>全部分类</span><i></i></p>
          <div>
            <ul class="nav-list">
              <li class="nav-main">
                <p>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=621"
                  >
                    咖啡
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=627"
                  >
                    饮食
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=691"
                  >
                    正餐
                  </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=279"
                  >
                    男装
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=294"
                  >
                    女装
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=35"
                  >
                    鞋靴
                  </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=122"
                  >
                    眼镜
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=339"
                  >
                    内衣配饰
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=39"
                  >
                    运动
                  </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=119"
                  >
                    美妆
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=724"
                  >
                    个护
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=391"
                  >
                    母婴
                  </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=652"
                  >
                    生鲜直供
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=51"
                  >
                    餐厨
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=334"
                  >
                    电器
                  </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=153"
                  >
                    箱包
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=223"
                  >
                    数码办公
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=429"
                  >
                    汽配
                  </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=355"
                  >
                    家纺
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=10"
                  >
                    家具
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=369"
                  >
                    家装
                  </a>
                </p>
              </li>

              <li class="nav-main">
                <p>
                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=546"
                  >
                    健康保健
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=685"
                  >
                    宠物
                  </a>

                  <span>/</span>

                  <a
                    href="http://www.biyao.com/classify/category.html?categoryId=816"
                  >
                    礼品
                  </a>
                </p>
              </li>
            </ul>
          </div>
        </div>
        <div class="nav-search">
          <p>
            <input
              type="text"
              id="searchInput"
              placeholder="请输入要搜索的商品"
            /><span id="searchBtn"></span>
          </p>
          <ul>
            <li>电动牙刷</li>
            <li>男士内裤</li>
            <li>防晒霜</li>
            <li>防晒</li>
            <li>防晒衣女</li>
            <li>眼镜近视女</li>
            <li>洗发水</li>
            <li>面膜</li>
            <li>凉席</li>
            <li>沐浴露</li>
          </ul>
        </div>
        <div class="nav-tab">
          <ul>
            <li><a href="http://www.biyao.com/home/index.html">首页</a></li>
            <li>
              <a href="http://www.biyao.com/classify/newProduct.html"
                >每日上新</a
              >
            </li>
            <li class="border-l"></li>
            <li class="nav-tab-last">
              <div class="hover_text">
                了解必要
                <div class="hover_code gzh">
                  <span
                    >关注必要微信公众号<br />了解你想了解的一切<br />小必姐在此发福利哦</span
                  >
                </div>
              </div>
            </li>
            <li class="nav-tab-last" id="appDownload">下载必要APP</li>
            <li class="border-l"></li>
            <li class="nav-tab-last">
              <div class="hover_text">
                我的必要
                <div class="hover_code app">
                  <span>
                    扫码下载必要app
                    <br />
                    手机用户独享海量权益
                  </span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 分类栏 -->
    <div class="cateBread">
      <span>一级分类：</span>
      <ul id="one">
        <!-- <li>示例</li> -->
      </ul>
    </div>
    <div class="cateBread">
      <span>二级分类：</span>
      <ul id="two">
        <!-- <li>休食</li> -->
      </ul>
    </div>
    <div class="cateBread">
      <span>三级分类：</span>
      <ul id="three">
        <!-- <li>零食</li> -->
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     
    <script>
      const serch = document.querySelector('#searchInput')
      const serchBtn = document.querySelector('#searchBtn') // let firstId

      render() // 渲染一级
      function render() {
        axios.get('http://123.57.109.30:3999/api/categoryfirst').then((res) => {
          const { data } = res
          const list = data.list
          const oneCenter = list
            .map((item) => {
              const li = document.createElement('li')
              li.innerHTML = item.firstName
              li.dataset.id = item.firstId
              one.appendChild(li)
              return li
            })
            .join('')
        })
      } // 渲染二级列表

      document
        .querySelector('.cateBread #one')
        .addEventListener('click', function (e) {
          const oneId = e.target.dataset.id // console.dir(e.target.dataset.id);
          axios
            .get('http://123.57.109.30:3999/api/categorySecond', {
              params: { firstId: oneId },
            })
            .then((res) => {
              const { list } = res.data
              console.log(list)
              
              const twoCenter = list
                .map((item) => {
                  two.innerHTML = ''
                  const li = document.createElement('li')
                  li.dataset.id = item.secondId
                  li.innerHTML = item.secondName
              
                  console.log(li)
                  two.appendChild(li)
                  console.log(two);
                  return two
                })
                .join(' ')
            })
        }) // 渲染三级列表

      document
        .querySelector('.cateBread #two')
        .addEventListener('click', function (e) {
          const threeId = e.target.dataset.id // console.log(threeId);
          axios
            .get('http://123.57.109.30:3999/api/categoryThird', {
              params: { secondId: threeId },
            })
            .then((res) => {
              const { list } = res.data
              console.log(list)
              let threeCenter = list
                .map((item) => {
                  console.log(item)
                  const li = document.createElement('li')
                  li.innerHTML = item.thiredName
                  three.innerHTML = ''
                  three.appendChild(li)
                  return three
                })
                .join(' ')
            })
        })
    </script>
  </body>
</html>
